<template>
  <div class="generate-qrcode">
    <!-- 头部 -->
    <div class="app-main-content-box">
      <div class="flexRBC">
        <el-form
          ref="fomData"
          :inline="true"
          :model="formData"
          class="demo-form-inline"
        >
          <el-form-item label="" prop="title">
            <el-input
              v-model="formData.title"
              size="medium"
              placeholder="请输入公告标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="status">
            <el-select
              v-model="formData.status"
              size="medium"
              placeholder="请选择状态"
            >
              <el-option label="未开始" value="0" />
              <el-option label="进行中" value="1" />
              <el-option label="已结束" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="showValue">
            <el-select
              v-model="formData.showValue"
              size="medium"
              placeholder="请选择可见群体"
            >
              <el-option label="全部用户" value="1" />
              <el-option label="部分会员卡" value="3" />
              <el-option label="全部会员卡" value="2" />
              <el-option label="部分会员标签" value="4" />
              <el-option label="全部会员标签" value="5" />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="date">
            <el-date-picker
              v-model="formData.date"
              align="right"
              size="medium"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" @click="searchData()"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="medium"
              @click="resetForm('fomData')"
              >重置</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" @click="toDetail('add')"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="app-main-content-box content">
      <!-- 表格内容 -->
      <div class="list-table">
        <el-table
          v-loading="tableLoading"
          :data="list"
          border
          stripe
          style="width: 100%"
          size="small"
          empty-text="暂无数据"
        >
          <el-table-column prop="orderNum" align="center" width="120px">
            <template slot="header" slot-scope="scope">
              序号
              <i
                class="el-icon-edit icon_class"
                v-if="!isEdit"
                @click="isEdit = true"
              />
              <i
                class="el-icon-check icon_class"
                v-if="isEdit"
                @click="editOrderNum()"
              />
              <i
                class="el-icon-close icon_class"
                v-if="isEdit"
                @click="editOrderNum('close')"
              />
            </template>
            <template slot-scope="scope">
              <div v-if="!isEdit">{{ scope.row.orderNum }}</div>
              <el-input
                v-else
                v-model="scope.row.orderNum"
                size="mini"
                class="table_input"
                maxlength="3"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              />
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="introduction" label="简介" width="180" />
          <el-table-column prop="showType" label="可见群体">
            <template slot-scope="scope">
              {{ lookOption[scope.row.range] }}
            </template>
          </el-table-column>
          <el-table-column prop="bindStatus" label="显示时间" width="220">
            <template slot-scope="scope">
              {{ scope.row.showStartTime }}-{{ scope.row.showEndTime }}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              {{
                scope.row.status == 0
                  ? "未开始"
                  : scope.row.status == 1
                  ? "进行中"
                  : "已结束"
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                v-if="scope.row.status == 0"
                @click="toDetail(scope.row, 'edit')"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="toDetail(scope.row, 'read')"
                >查看</el-button
              >
              <el-button
                type="text"
                size="small"
                v-if="scope.row.status == 1"
                @click="overAndDeleteAffiche(scope.row, 1)"
                >结束</el-button
              >
              <el-button
                v-if="scope.row.status == 0 || scope.row.status == 2"
                type="text"
                size="small"
                @click="overAndDeleteAffiche(scope.row, 2)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination-direction
          v-if="paginationConfig.total !== 0"
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAfficheList,
  deleteAffiche,
  editOrderNum,
  changeAfficheStatus,
} from "@/api/business";

export default {
  components: {
    // DialogQrcode
  },
  data() {
    return {
      // 配置
      paginationConfig: {
        // 分页配置
        direction: "center", // 分页位置
        layout: "total, sizes, prev, pager, next, jumper", // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10, // 每页条数-默认10
      },
      tableLoading: false, // 表格loading
      searchLoading: false,
      // 数据
      list: [], // 表格数据
      sourceList: [], // 表格源数据
      formData: {
        title: "",
        status: "",
        showValue: "",
        date: [],
      },
      isEdit: false,
      lookOption: {
        1: "全部用户",
        3: "部分会员卡",
        2: "全部会员卡",
        4: "部分会员标签",
        5: "全部会员标签",
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    // 获取列表
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      let {
        formData: { date },
        formData,
      } = this;
      let newPar = JSON.parse(JSON.stringify(formData));
      newPar.pageNum = page;
      newPar.pageSize = pageSize;
      delete newPar.date;
      if (date.length) {
        newPar.endTime = `${date[1]} 23:59`;
        newPar.startTime = `${date[0]} 00:00`;
      }

      getAfficheList(newPar).then((res) => {
        if (res.code == 0) {
          this.list = res.data.list;
          this.sourceList = JSON.parse(JSON.stringify(res.data.list));
          this.paginationConfig.total = res.data.total;
        }
      });
    },

    // 分页sizes改变
    sizesChange() {
      this.initData();
    },
    searchData() {
      this.paginationConfig.pageSize = 10;
      this.paginationConfig.page = 1;
      this.initData();
    },

    // 分页page改变
    pageChange() {
      this.initData();
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.paginationConfig.pageSize = 10;
      this.paginationConfig.page = 1;
      this.initData();
    },

    // 跳转编辑/新增公告/查看公告
    toDetail(rowData, type) {
      this.$router.push({
        name: "BusinessAddAffiche",
        query: {
          type,
          id: rowData ? rowData.id : "",
        },
      });
    },
    // 结束公告
    overAndDeleteAffiche(row, type) {
      // type 1 结束公告 2删除公告
      let { id } = row;
      let title =
        type == 1
          ? "公告当前还在进行中，是否提前结束"
          : "是否删除当前公告？删除后将不可恢复，请谨慎操作！";
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        if (type == 2) {
          deleteAffiche({ id }).then((res) => {
            if (res.code == 0)
              this.$message({ type: "success", message: "操作成功!" });
            this.searchData();
          });
        } else {
          changeAfficheStatus({ id, status: 2 }).then((res) => {
            if (res.code == 0) {
              this.$message({ type: "success", message: "操作成功!" });
              this.searchData();
            }
          });
        }
      });
    },
    // 编辑序号
    editOrderNum(type) {
      let { list, sourceList } = this;
      let falg = false;
      let arr = [];
      let isChange = false;
      if (!type) {
        list.forEach((item) => {
          if (!item.orderNum) {
            falg = true;
          }
        });
        if (falg) {
          this.$message.error("请将所有序号填写完整后再进行提交");
          return;
        }
        list.forEach((item) => {
          let { id, orderNum } = item;
          isChange = false;
          sourceList.forEach((itm) => {
            if (itm.id == item.id && item.orderNum != itm.orderNum) {
              isChange = true;
            }
          });
          if (isChange) {
            arr.push({ id, orderNum });
          }
        });
        editOrderNum(arr).then((res) => {
          if (res.code == 0) {
            this.$message.success("编辑成功");
          }
        });
      }
      this.initData();
      this.isEdit = false;
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.generate-qrcode {
  .content {
    margin-top: 10px;
  }
  /* 搜索*/
  .list-search {
    .el-input {
      width: 40%;
      min-width: 300px;
      max-width: 500px;
      margin-right: 10px;
    }
  }
  /* 筛选 */
  .el-radio + .el-radio {
    margin-left: 0;
  }
  .el-radio {
    margin-right: 10px;
    height: 32px;
    line-height: 32px;
  }
}
.table_input {
  /deep/.el-input__inner {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    text-align: center;
  }
}
.icon_class {
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin: 0 8px;
}
</style>
